<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/math.min.js?v0"></script>
    <script src="js/jquery-3.2.1.min.js?v0"></script>
    <script src="js/caculate.js?v0"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css?v0"/>
    <title>批量计算</title>
</head>
<body>
<br>
<div id="table">
    <span style="margin-left: 80px">跳转到<a href="index.html" target="_blank">毛利率->定价</a></span>
    <table class="hovertable">
        <caption>批量计算</caption>
        <thead>
        <tr id="head">
            <th>SKU</th>
            <th>数量</th>
            <th>利润率</th>
            <th>中國测试数据A</th>
            <th>印尼A</th>
            <th>印尼B</th>
            <th>印尼C</th>
            <th>马来A</th>
            <th>马来B</th>
            <th>马来C</th>
            <th>台湾宅配</th>
            <th>泰国A</th>
            <th>泰国B</th>
            <th>新加坡Standard Express</th>
            <th>新加坡Standard Economy</th>
            <th>菲律宾A</th>
            <th>菲律宾B</th>
            <th>菲律宾C</th>
            <th>越南A</th>
            <th>越南B</th>
        </tr>
        </thead>
        <tbody id="body">
        <tr>
            <td><input class="sku" type="text" onchange="changeFun(this)" value=""></td>
            <td><input class="number" type="number" onchange="changeFun(this)" value="1"></td>
            <td><input class="rate" type="number" onchange="changeFun(this)" value=""></td>
        </tr>
        </tbody>
    </table>
    <br>
    <button id="addrow">添加</button>
</div>
</body>

<script>
    var changeFun = function (obj) {
        if (notnull(obj)) {
            cal(obj)
        }
    };
    var notnull = function (obj) {
        let parent = $(obj).parent().parent();
        let rate = parent.find(".rate").first().val();
        let sku = parent.find(".sku").first().val();
        let number = parent.find(".number").first().val();
        if (rate > 0 && sku != null && sku != "" && number > 0) {
            return true;
        } else {
            return false;
        }
    };
    /**
     * 计算
     * @param that
     */
    var cal = function (obj) {
        let that = $(obj).parent();
        let row = that.parent();
        let sku = $(that).parent().find(".sku").val();
        let number = $(that).parent().find(".number").val();
        let rate = $(that).parent().find(".rate").val();
        let ajax = $.ajax({url: "data/goods.json", async: false});
        let goodsData = ajax["responseJSON"];
        $.each(goodsData, function () {
            //获取数据
            console.log(this.sku === sku)
            if (this.sku == sku) {
                let data = dataJsonByOne(this.cost, this.weight, rate, number);
                console.log(data);
                $.each(data, function () {
                    appendPage(this,row);
                });
                return true;
            }
        })
    }

    // ------------------------页面处理---------------------------
    // 添加一行数据事件
    $("#addrow").click(function () {
        let trString = "<tr>\n" +
            "            <td><input class=\"sku\" type=\"text\" onchange=\"changeFun(this)\" value=\"\"></td>\n" +
            "            <td><input class=\"number\" type=\"number\" onchange=\"changeFun(this)\" value=\"1\"></td>\n" +
            "            <td><input class=\"rate\" type=\"number\" onchange=\"changeFun(this)\" value=\"\"></td>\n" +
            "        </tr>";
        $("#body").append(trString);
    });

    //表格渲染
    var appendPage = function (data,row) {
        let sellpriceStr = "";
        let sellPrice = data.sellPrice;
        sellpriceStr += "<td>" + sellPrice + "</td>";
        row.append(sellpriceStr);
    };

    // 鼠标样式
    $(".hovertable tr").mouseover(function () {
        this.style.backgroundColor = '#ffff66'
    });
    $(".hovertable tr").mouseout(function () {
        this.style.backgroundColor = '#d4e3e5'
    });
</script>
</html>